<template>
  <div class="forget-password">
    <a-modal
      v-model="forgetVisible"
      :centered="true"
      :maskClosable="false"
      dialogClass="common-dialog"
      :width="490"
    >
      <div class="title-box">
        <span class="login-title">忘记密码</span>
        <p class="second-title">商信政通公司出品的文本撰写助手</p>
      </div>
      <a-form :form="forgetForm">
        <a-form-item>
          <a-input
            v-decorator="[
            'mobile',
            { rules: [{ required: true,message: '请输入手机号'},{message:'手机号码格式不正确',pattern:/^1[3456789]\d{9}$/}] }
          ]"
            type="text"
            autocomplete="off"
            :maxLength="11"
            placeholder="手机"
            @focus="mobileTooltip=true"
            @blur="mobileTooltip=false"
          >
            <a-tooltip :visible="mobileTooltip" slot="prefix" title="11位数字" placement="topLeft">
              <a-icon class="password-tip" type="mobile" style="color: rgba(0,0,0,.25)" />
            </a-tooltip>
          </a-input>
        </a-form-item>
        <a-form-item class="verify-code">
          <a-input
            v-decorator="[
            'verifyCode',
            { rules: [{ required: true, message: '请输入验证码'},{message:'只允许输入数字',pattern:/^[0-9]*$/ }] }
          ]"
            :maxLength="4"
            type="text"
            autocomplete="off"
            placeholder="验证码"
          >
            <a-icon slot="prefix" type="safety" style="color: rgba(0,0,0,.25)" />
          </a-input>
          <span
            :class="{'get-code':true,'get-code-clickable':btnText==='获取验证码'?true:false}"
            @click="getCode(2)"
            v-text="btnText"
          ></span>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
            'password',
            { rules: [{ required: true,message: '请输入新密码' },{message: '密码长度不小于8位',min:8},
            {message: '只允许包含数字、字母、符号',pattern:/^[a-zA-Z0-9@\$\#\%\^\.\,\*\\\/?]{0,16}$/}] }
          ]"
            :maxLength="16"
            type="password"
            placeholder="新密码"
            autocomplete="new-password"
            @focus="passwordTip=true"
            @blur="passwordTip=false"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            <a-tooltip
              :visible="passwordTip"
              slot="suffix"
              title="8~16位英文字母+数字+符号的组合"
              placement="topRight"
            >
              <a-icon class="password-tip" type="info-circle" @click="passwordTip=!passwordTip" />
            </a-tooltip>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
            'rePassword',
            { rules: [{ required: true, message: '请再次输入密码'},{
                validator: compareToNewPassword,
              },] }
          ]"
            :maxLength="16"
            type="password"
            autocomplete="new-password"
            placeholder="确认密码"
            @pressEnter="forgetEvt"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="forgetEvt">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { getCode, forgetPassword, checkMobile } from "@/api/login";
export default {
  data() {
    return {
      forgetVisible: false,
      btnText: "获取验证码",
      mobileTooltip: false, //忘记密码 手机号提示语显示隐藏
      passwordTip: false, //忘记密码 手机号提示语显示隐藏
      myInterval: null,
    };
  },
  beforeCreate() {
    this.forgetForm = this.$form.createForm(this, { name: "normal_forget" });
  },
  methods: {
    //忘记密码修改密码
    forgetEvt(e) {
      e.preventDefault();
      let that = this;
      let mobile = that.forgetForm.getFieldValue("mobile");
      if (!mobile) {
        that.$message.destroy();
        that.$message.warning("请输入手机号");
        return;
      }
      const flag = /^1[3456789]\d{9}$/.test(mobile);
      if (!flag) {
        that.$message.destroy();
        that.$message.warning("手机号码格式不正确");
        return;
      }
      checkMobile({
        mobile: that.forgetForm.getFieldValue("mobile"),
        smsCode: "CODE-003",
      })
        .then((res) => {
          if (!res.data) {
            //登录时 手机号不存在 或者审核未通过
            that.$message.destroy();
            that.$message.error(res.msg);
            return false;
          }
          if (!that.codeFlag) {
            that.$message.destroy();
            that.$message.warning("请先获取验证码");
            return false;
          }
          that.forgetForm.validateFields((err, values) => {
            if (!err) {
              let param = Object.assign({}, values);
              delete param.rePassword;
              forgetPassword(param)
                .then((res) => {
                  that.$message.success(res.msg);
                  that.forgetVisible = false;
                })
                .catch((err) => {
                  that.$message.destroy();
                  that.$message.error(err);
                });
            }
          });
        })
        .catch((err) => {
          that.$message.destroy();
          that.$message.error(err);
        });
    },
    // 忘记密码  确认密码校验
    compareToNewPassword(rule, value, callback) {
      if (value && value !== this.forgetForm.getFieldValue("password")) {
        callback("两次输入的密码不一致!");
      } else {
        callback();
      }
    },
    //获取验证码 type 1注册时获取验证码 2忘记密码时获取验证码
    getCode(type) {
      let that = this;
      if (that.btnText === "获取验证码") {
        let mobile =
          type === 1
            ? that.registerForm.getFieldValue("mobile")
            : that.forgetForm.getFieldValue("mobile");
        if (!mobile) {
          that.$message.destroy();
          that.$message.warning("请输入接收验证码的手机号");
          return;
        }
        const flag = /^1[3456789]\d{9}$/.test(mobile);
        if (!flag) {
          that.$message.destroy();
          that.$message.warning("手机号码格式不正确");
          return;
        }
        checkMobile({
          mobile: mobile,
          smsCode: type === 1 ? "CODE-001" : type === 2 ? "CODE-003" : "",
        })
          .then((res) => {
            if (type === 1 && res.data) {
              //注册时 手机号存在
              that.$message.destroy();
              that.$message.error(res.msg);
              return false;
            }
            if (type === 2 && !res.data) {
              //登录时 手机号不存在
              that.$message.destroy();
              that.$message.error(res.msg);
              return false;
            }
            getCode({
              mobile: mobile,
              smsCode: type === 1 ? "CODE-001" : type === 2 ? "CODE-003" : "",
            })
              .then((res) => {
                that.codeFlag = true;
                that.$message.success("短信发送成功，请注意查收");
                // 设置定时器，发送验证码
                let num = 119;
                that.btnText = `${num}s后重新获取`;
                that.myInterval = setInterval(() => {
                  if (num < 1) {
                    clearInterval(that.myInterval);
                    that.btnText = "获取验证码";
                  } else {
                    num--;
                    that.btnText = `${num}s后重新获取`;
                  }
                }, 1000);
              })
              .catch((err) => {
                that.$message.destroy();
                that.$message.error(err || "短信发送失败，请稍后重试!");
                clearInterval(that.myInterval);
                that.btnText = "获取验证码";
              });
          })
          .catch((err) => {
            that.$message.destroy();
            that.$message.error(err);
          });
      }
    },
    closeForgetModal() {
      this.forgetVisible = false;
    },
    openForgetModal() {
      this.forgetVisible = true;
      this.forgetForm.resetFields();
    },
  },
};
</script>

<style lang="stylus" scoped></style>